<template>
  <div id="index" ref="appRef">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div class="home">
      <dv-border-box-11
        title="智慧城市大数据平台"
        :titleWidth="280"
        :color="['#22C8FC', '#1D5B75']"
      >
        <div class="flex col hei00">
          <div class="flex_middle title">
            <div class="flex1 hei00 flex_end col">
              <div class="time">
                <span>{{ ynd }}</span>
                <span class="pad_l20 pad_r20">{{ hms }}</span>
                <span>{{ day }}</span>
              </div>
            </div>
            <div class="flex1 hei00 flex_end col">
              <div class="text_right">
                <Screenfull
                  id="screenfull"
                  class="right-menu-item hover-effect"
                />
                <span class="mar_l10">全屏</span>
              </div>
            </div>
          </div>
          <div class="hei10"></div>
          <div class="flex1 wrap_chart">
            <div class="box_top flex">
              <div class="top_l">
                <!-- 左上 -->
                <div class="l_t mar_t10">
                  <dv-border-box-1 :color="['#22C8FC', '#1D5B75']">
                  </dv-border-box-1>
                </div>
                <div class="l_b mar_t10">
                  <dv-border-box-1 :color="['#22C8FC', '#1D5B75']">
                  </dv-border-box-1>
                </div>
              </div>
              <div class="top_c flex1 flex_mc">
                <div class="cen flex_mc">
                </div>
              </div>
              <div class="top_r">
                <div class="mar_b10 r_t">
                  <dv-border-box-1 :color="['#22C8FC', '#1D5B75']">
                  </dv-border-box-1>
                </div>
                <div class="mar_b10 r_b">
                  <dv-border-box-1 :color="['#22C8FC', '#1D5B75']">
                  </dv-border-box-1>
                </div>
              </div>
            </div>
            <div class="hei5"></div>
            <div class="box_bottom flex_between">
              <div class="b_l">
                <dv-border-box-1 :color="['#22C8FC', '#1D5B75']">
                </dv-border-box-1>
              </div>
              <div class="b_c">
                <dv-border-box-1 :color="['#22C8FC', '#1D5B75']">
                </dv-border-box-1>
              </div>
              <div class="b_r">
                <dv-border-box-1 :color="['#22C8FC', '#1D5B75']">
                </dv-border-box-1>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-11>
    </div>
  </div>
</template>

<script>
import Screenfull from "@/components/Screenfull/index.vue";
import drawMixin from "../utils/drawMixin";
export default {
  mixins: [drawMixin],
  components: {
    Screenfull
  },
  data() {
    return {
      timer: null,
      ynd: "",
      hms: "",
      day: "",
      loading: true,
    };
  },
  mounted() {
    window.onresize = () => {
      this.$hub.$emit("reload", 1);
    };
    this.timer = setInterval(() => {
      this.getDay();
    }, 1000);
    setTimeout(() => {
      this.loading = false;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.$hub.$off("reload");
  },
  methods: {
    getDay() {
      const d = new Date();
      let y = d.getFullYear();
      let mo = d.getMonth() + 1;
      let r = d.getDate();
      let day = d.getDay();
      let h = d.getHours();
      let m = d.getMinutes();
      let s = d.getSeconds();

      h = h >= 10 ? h : "0" + h;
      m = m >= 10 ? m : "0" + m;
      s = s >= 10 ? s : "0" + s;
      mo = mo >= 10 ? mo : "0" + mo;
      r = r >= 10 ? r : "0" + r;
      this.ynd = `${y}年${mo}月${r}日`;
      this.hms = `${h}:${m}:${s}`;
      this.day = this.getdate(day);
    },
    getdate(key) {
      switch (key) {
        case 1:
          return "星期一";
          break;
        case 2:
          return "星期二";
          break;
        case 3:
          return "星期三";
          break;
        case 4:
          return "星期四";
          break;
        case 5:
          return "星期五";
          break;
        case 6:
          return "星期六";
          break;
        case 7:
          return "星期日";
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
  .home {
    background: url("./../assets/image/bannerBG.png") no-repeat center center;
    background-size: 100% 100%;
    padding: 16px 16px 0 16px;
    width: 100%;
    height: 100%;
    .title {
      // height: 7vh;
      min-height: 60px;
      .time {
        line-height: 30px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #23cefd;
        padding-left: 18%;
      }
    }

    .wrap_chart {
      padding: 0px 25px;
      .box_top {
        height: 66.6%;
        width: 100%;
        .top_l {
          width: 29%;
          .l_t {
            height: 49%;
          }
          .l_b {
            height: 49%;
          }
        }
        .cen {
          width: 95%;
          height: 95%;
          color: #fff;
          font-size: 60px;
        }
        .top_r {
          width: 29%;
          .r_t {
            height: 49%;
          }
          .r_b {
            height: 49%;
          }
        }
      }
      .box_bottom {
        height: 30%;
        width: 100%;
        .b_l {
          width: 36%;
          height: 100%;
        }
        .b_c {
          width: 26.56%;
          height: 100%;
        }
        .b_r {
          width: 36%;
          height: 100%;
        }
      }
    }
  }
}
.text_right {
  text-align: right;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #23cefd;
  padding-right: 18%;
  display: flex;
  justify-content: end;
  z-index: 1001px;
}
</style>